<template>
    <div class="table-model">
        <el-table :data="tableData" :height="`${minHeight ? `${minHeight}px` : ''}`" style="width: 100%"
            :highlight-current-row="openClick" @cell-click="handleCurrentChange" ref="tableRef">
            <slot />
        </el-table>
        <div class="table-model-pagination">
            <el-pagination :current-page="page" :page-size="pageSize" :total="total"
                layout="total, sizes, prev, pager, next, jumper" @current-change="changePage"
                @size-change="changePageSize" />
        </div>
    </div>
</template>

<script setup>
const emit = defineEmits(['changePage', 'changePageSize'])

const props = defineProps({
    tableData: {
        type: Array,
        default: () => []
    },
    loading: {
        type: Boolean,
        default: false
    },
    total: {
        type: Number,
        default: 0
    },
    page: {
        type: Number,
        default: 1
    },
    pageSize: {
        type: Number,
        default: 10
    },
    minHeight: {
        type: Number,
        default: 0
    },
    id: {
        type: String,
        default: ''
    },
    openClick: {
        type: Boolean,
        default: false
    }
})

const changePage = (page) => {
    emit('changePage', page)
}

const changePageSize = (pageSize) => {
    emit('changePage', pageSize)
}

const handleCurrentChange = (row) => {
    if (props.openClick) {
        emit('currentChange', row)
    }
}

const tableRef = ref(null)

const handleCurrent = (row) => {
    tableRef.value.setCurrentRow(row)
}

defineExpose({
    handleCurrent
})
</script>

<style lang="scss" scoped>
.table-model {
    .table-model-pagination {
        display: flex;
        justify-content: flex-end;
        margin-top: 30px;
    }
}
</style>